// api分类链接
// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]
/**
 * 
 */
//需要定义一个变量，用于拼接页面需要的HTML片段
// 遍历数组
let aHtml = ""
apiTypeData.forEach(function (v) {
    // 取出数组中的每个对象，拼接a标签
    aHtml = aHtml + `<a href="#"  keyword="${v.keyword}" class="${v.isnew ? "api-link" : ""}">${v.name}</a>`
})
// console.log(aHtml)
// 拼接完成之后，需要将htm1添加到页面上
let links = document.querySelector(".api-list-top")
links.innerHTML = aHtml

/**
 * 需求2：点击api分类的每个a标签，需要在下面的input中的切换显示的内容
 */
let btns = document.querySelectorAll(".api-list-top a")
btns.forEach(function (v) {
    v.addEventListener("click", function () {
        // console.log(this)
        // console.log(this.getAttr)
        let input = document.querySelector(".api-search input")
        input.placeholder = this.getAttribute("keyword")
        let strong = document.querySelector("strong")
        strong.innerHTML = this.textContent
    })
})

//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]
/**
 * 需求3：根据模拟的后台 api列表的数据，需要在页面上许安然处每个api列表
 */
let listHtml = ""
listDataArr.forEach(function (v) {
    listHtml += `<li>
    <span class="api-content-header ${v.isSpecial === true ? "company-money" : "company-free"}">
        企业专用
    </span>
    <div class="content">
        <a href="api_details.html">
            <img src="./imgs/${v.img}" alt="">
            <p class="content-title">${v.name}</p>
            <p class="${v.isSpecial ? "price" : "free"}">${v.price}</p>
        </a>
    </div>
    <a href="" class="api-content-btn">申请数据</a>
</li>`
// console.log(listHtml)
})
let ul = document.querySelector("ul")
ul.innerHTML = listHtml



// let applyBtn = document.querySelectorAll(".api-content-btn")
// console.log(applyBtn);
let mask = document.querySelector(".mask")
ul.addEventListener("click",function(e){
    // e.target
    if(e.target.className==="api-content-btn"){
        mask.style.display = "block"
        e.preventDefault()
    }
})



mask.addEventListener("click",function(e){
    if(e.target.className==="mask"){
        e.target.style.display = "none"
    }
})



let loginBtns = document.querySelectorAll(".login a")
let loginDiv  = document.querySelectorAll(".mask .login-div")
loginBtns.forEach(function(v,i){
    v.addEventListener("click",function(){
        for(let x=0;x<loginBtns.length;x++){
            loginBtns[x].className=""
            loginDiv[x].classList.remove("login-active")
        }
        this.className = "active"
        loginDiv[i].classList.add("login-active")
    })
})


let username = document.querySelector("input[placeholder='用户名/手机号/邮箱']")
let password = document.querySelector("input[placeholder='密码']")
let btn = document.querySelector("button")
let noUserName = document.querySelector(".no-username")
let noPassword = document.querySelector(".no-password")
let loginSuccess = document.querySelector(".login-success")
btn.addEventListener("click",function(){
    if(username.value.length<6||username.value.length>12){
        noUserName.style.display = "block"
        let t = setTimeout(function(){
            noUserName.style.display = "none"
        },1000)
    }else if(password.value.length<6||password.value.length>12) {
        noPassword.style.display = "block"
        let t = setTimeout(function(){
            noPassword.style.display = "none"
        },1000)
    }else{
        loginSuccess.style.display = "block"
        let t = setTimeout(function(){
            loginSuccess.style.display = "none"
        },3000)
    }
})



let cancleUserName = document.querySelector(".login-username img")
let canclePassword = document.querySelector(".login-password img")
let eye = document.querySelector(".eye")
cancleUserName.addEventListener("click",function(){
    username.value = ""
})
canclePassword.addEventListener("click",function(){
    password.value = ""
})
password.addEventListener("input",function(){
    if(password.value.length>0){
        eye.style.display = "block"
    }else{
        eye.style.display = "none"
    }
})
eye.addEventListener("click",function(){
    if(password.type==="password"){
        password.type = "text"
        eye.style.backgroundImage = "url(../imgs/close-eye.png)"
    }// }else{
    //     password.type = "password"
    //     eye.style.backgroundImage = "url(../imgs/eye.png)"
    // }
})
// console.log(cancleUserName);
// console.log(username);